<template>
  <orh-trees :treesHead="treesHead" reload @on-reload="refresh">
    <Tree :data="trees" slot="trees" :load-data="loadData" @on-select-change="itemChange"></Tree>

    <DatePicker
      @on-change="daterangeChange"
      style="width:200px;margin-left: -9px;"
      size="small"
      type="daterange"
      placeholder="请选择时间段"
      slot="option"
    ></DatePicker>

    <Select
      v-model="section"
      style="width:100px;margin: 0 10px;"
      clearable
      slot="option"
      size="small"
    >
      <Option v-for="(item, index) in sectionList" :key="index" :value="item.value">{{ item.label }}</Option>
    </Select>

    <Button type="primary" @click="handleSubmit" size="small" slot="option">筛选</Button>

    <orh-sub-table slot="content">
      <Row slot="table" style="min-height: 50px;">
        <echarts v-if="!tableload" :option="datas" style="width:100%;height:420px;"></echarts>
        <Spin size="large" fix v-if="tableload"></Spin>
      </Row>
    </orh-sub-table>
  </orh-trees>
</template>
                
<script>
const Echarts = () =>
  import("~/components/Public/Echarts").then(m => m.default || m);
export default {
  name: "dutymodule-teacherduty",
  components: {
    Echarts
  },
  data() {
    return {
      tableload: false,
      condition: "",
      an_time: null,
      en_time: null,
      section: null,
      treesHead: {
        title: "选择老师",
        button: false,
        button_text: "添加按钮"
      },
      sectionList: [
        { value: 1, label: "早自习" },
        { value: 5, label: "早读" },
        { value: 6, label: "自愿值班" },
        { value: 2, label: "第一晚自习" },
        { value: 3, label: "第二晚自习" },
        { value: 4, label: "第三晚自习" }
      ],
      datas: {
        title: {
          text: ""
        },
        color: ["#19be6b", "#ed4014", "#2db7f5"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["加分", "减分", "总统计"]
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: []
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "加分",
            type: "bar",
            barGap: 0,
            data: []
          },
          {
            name: "减分",
            type: "bar",
            data: []
          },
          {
            name: "总统计",
            type: "bar",
            data: []
          }
        ]
      },
      trees: [],

      url: "api/watchlist/v1/watchlistfrostatistics/teacherindexcont?user_id=",

      treesUrl: "api/watchlist/v1/get/departmentstest/test",
      treesUrls: "api/user/v1/get/department/users?department_id="
    };
  },
  methods: {
    /************************************************************
     *
     * 选择时间
     *
     ************************************************************/
    daterangeChange(val) {
      this.an_time = val[0] != "" ? val[0] : null;
      this.en_time = val[1] != "" ? val[1] : null;
    },

    /************************************************************
     *
     * 选择时间
     *
     ************************************************************/
    handleSubmit() {
      this.condition = "";
      if (this.an_time != null && this.en_time != null) {
        this.condition +=
          "&an_time=" + this.an_time + "&en_time=" + this.en_time;
      }
      if (this.section != null) {
        this.condition += "&section=" + this.section;
      }
      this.data = [];
      this.columns = [];
      this.tableload = true;
      this.queryData();
    },

    /************************************************************
     *
     * 年级组数据
     *
     ************************************************************/
    treesData() {
      this.$http
        .get(this.treesUrl)
        .then(val => {
          val.data.forEach((el, i) => {
            this.trees.push({
              title: el.department_name.zh
                ? el.department_name.zh
                : el.department_name.mn,
              value: el.id,
              state: 1,
              loading: false,
              children: []
            });
          });
          console.log(this.trees);
        })
        .catch(err => {
          console.log(err);
        });
    },

    /************************************************************
     *
     * 树数据
     *
     ************************************************************/
    loadData(item, callback) {
      this.$http
        .get(this.treesUrls + item.value)
        .then(val => {
          let datas = [];
          val.data.forEach((el, i) => {
            datas.push({
              title: el.name.zh,
              value: el.id,
              state: 2
            });
          });
          callback(datas);
        })
        .catch(err => {
          console.log(err);
        });
    },

    /************************************************************
     *
     * 选择树菜单
     *
     ************************************************************/
    itemChange(val) {
      if (val.length != 0) {
        if (val[0].state == 1) {
          this.$Message.warning("请选择教师");
          return;
        }
        this.data = [];
        this.columns = [];
        this.tableload = true;
        this.items = val[0].value;
        this.datas.title.text = val[0].title;
        this.queryData();
      }
    },

    /************************************************************
     *
     * 手动刷新数据
     *
     ************************************************************/
    refresh() {
      this.data = [];
      this.columns = [];
      this.condition = "";
      this.section = null;
      this.an_time = null;
      this.en_time = null;
      this.tableload = true;
      this.queryData();
    },

    /************************************************************
     *
     * 获取列表数据
     *
     ************************************************************/
    queryData() {
      this.$http
        .get(this.url + this.items + this.condition)
        .then(val => {
          let arr1 = [];
          let arr2 = [];
          let arr3 = [];
          let arr4 = [];
          val.data.forEach(item => {
            arr1.push(
              item.watchlist_name.zh
                ? item.watchlist_name.zh
                : item.watchlist_name.mn
            );
            arr2.push(item.plus);
            arr3.push(item.reduce);
            arr4.push(item.cont);
          });
          this.datas.series[0].data = arr2;
          this.datas.series[1].data = arr3;
          this.datas.series[2].data = arr4;
          this.datas.xAxis[0].data = arr1;
          this.tableload = false;
        })
        .catch(err => {
          this.tableload = false;
          console.log(err);
        });
    }
  },
  created() {
    this.treesData();
  }
};
</script>